<template>
  <div class="app-container">
    <div>
      <h5 class="color-10">{{feedback.name}}</h5>

      <span class="color-b font-s10">{{feedback.createdAt}}</span>
      <p class="margin-t10 color-35 font-s12" v-html="feedback.content"></p>

      <div class="margin-t margin-b" v-for="(item,index) in feedback.adminApply" :key="index">
        <span class="margin-t10 color-b font-s10">{{item.createdAt}}</span>
        <p class="content padding-b30 border-b margin-t10 color-35 font-s12" v-html="item.content"></p>
      </div>
      <tinymce ref="tinymce" :height="300" v-model="comment" style="width: 650px;" :key="1" placeholder="请输入您的回复"></tinymce>
      <div class="margin-t">
        <el-button @click="reply">回复</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { toGetFeedbackDetail, toComment } from '@/api/feedback'
import Tinymce from '@/components/Tinymce'
export default {
  components: {
    Tinymce
  },
  data() {
    return {
      feedback: [],
      comment: null
    }
  },
  created() {
    this.feedbackDetail()
  },
  methods: {
    feedbackDetail() {
      this.listLoading = true
      toGetFeedbackDetail(this.$route.params.feedbackId).then(res => {
        this.feedback = res.data.data
      })
        .catch(err => {
          console.log(err)
        })
    },
    reply() {
      var data = { 'feedbackId': this.$route.params.feedbackId, 'comment': this.comment }
      toComment(data).then(res => {
        this.$message({
          type: 'info',
          message: '回复成功'
        })
        this.$refs['tinymce'].setContent('')
        this.feedbackDetail()
      })
        .catch(err => {
          console.log(err)
        })
    },
    cancel() {
      this.comment = ''
      this.$refs['tinymce'].setContent('')
    }
  }
}
</script>
<style scope>
.content img {
  max-width: 300px;
  max-height: 300px;
}
</style>
